<template>
  <div>
    <top-bar></top-bar>
    <left-bar :datas='data'></left-bar>
    <div class="main">
      <div class="main-mains">
        <div class="main-content">
          <div class="main-mains-top">
            添加资讯分类<el-button
              size="mini"
              type="primary"
              @click="goBack"
              class="goBack"
            >返回</el-button>
          </div>
          <div class="editItem">
            <div class="group1 clear">
              <span class="leftTitle">*排序</span>
              <div class="rightContent">
                <el-input
                  placeholder=""
                  v-model.trim="sort"
                  type="number"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="editItem">
            <div class="group1 clear">
              <span class="leftTitle">*分类名称</span>
              <div class="rightContent lgRightContent">
                <el-input
                  placeholder=""
                  v-model.trim="category_name"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="editItem">
            <div class="group1 clear">
              <span class="leftTitle">分类图标</span>
              <div class="rightContent">
                <el-upload
                class="avatar-uploader"
                :action="uploadImgUrl"
                :show-file-list="false"
                :on-success="uploadImgSuccess"
                 :data="uploadData"
                 name="img"
                 :headers="uploadHeader"
                >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              </div>
            </div>
          </div>
         <div class="editItem">
            <div class="group1 clear">
              <span class="leftTitle">首页推荐</span>
              <div class="rightContent">
                <el-radio v-model="isFirstRadio" label="1">是</el-radio>
                <el-radio v-model="isFirstRadio" label="0">否</el-radio>
              </div>
            </div>
          </div>
          <div class="editItem">
            <div class="group1 clear">
              <span class="leftTitle">是否显示</span>
              <div class="rightContent">
                <el-radio v-model="statusRadio" label="1">是</el-radio>
                <el-radio v-model="statusRadio" label="0">否</el-radio>
              </div>
            </div>
          </div>
          <div class="operationButtom">
            <el-button
              round
              size="medium"
              @click="goBack"
            >返回列表</el-button>
            <el-button
              round
              size="medium"
              type="success"
              @click="saveCategory()"
            >提交</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import newsMan from "@/api/newsMan";
import store from "../store";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "newsman",
      newImgUrl: [],
      img_url: [],
      uploadImgUrl: "http://dev.cso.miotchina.net/adm/upload",
      projectId: "",
      projectOptions: [],
      category_id: "",
      categoryOptions: [],
      uploadData: {
        type: 11,
        filename: "img"
      },
      uploadHeader: {
        Authorization: "Bearer " + store.state.access_token
      },
      read_score: "",
      read_budget: "",
      articleTitle: "",
      article_source: "",
      urlPoints: "",
      urlType: "",
      urlCategoryId: "",
      sort:"",
      category_name:"",
      isFirstRadio:'1',
      statusRadio:'1',
      imageUrl:"",
      imagePath:""
    };
  },
  mounted() {
    this.urlPoints = this.getUrlParam("points");
    this.urlType = this.getUrlParam("type");
    this.urlCategoryId = this.getUrlParam("categoryId");
    if (this.urlType == "againEdit") {
         this.getCategoryDetail(this.urlCategoryId);
    }
    this.getCategory();
    this.getProject();
  },
  methods: {
    //获取文章详情
    getCategoryDetail(id) {
      let options;
      let _this = this;
      options = {
        category_id: id
      };
      newsMan.getCategoryDetail(options).then(function(res) {
        let data = res.data;
        if (res.code == 1) {
          _this.category_name = data.name;
          _this.imageUrl = data.img_url;
          _this.sort = data.sort;
          _this.statusRadio = data.status.toString();
          _this.isFirstRadio = data.is_first.toString();
        }
      });
    },
    //获取无积分文章详情
    getNoPointsNewDetail(id){
      let options;
      let _this = this;
      options = {
        article_id: id
      };
      newsMan.getNoPointsNewDetail(options).then(function(res) {
        let data = res.data;
        if (res.code == 1) {
          let img_url = [];
          _this.category_id = data.categorys.id;
          _this.projectId = data.spid;
          _this.ueditorFun();
          _this.articleTitle = data.title;
          _this.article_source = data.article_source;
          if (data.img_url.length > 0) {
            for (let i = 0; i < data.img_url.length; i++) {
              let imgeSplit = data.img_url[i].split("/");
              let imgName = imgeSplit[imgeSplit.length - 1];
              img_url.push({
                name: imgName,
                url: data.img_url[i]
              });
            }
          }
          _this.img_url = img_url;
          _this.newImgUrl = img_url;
        }
      });
    },
    //保存分类
    saveCategory() {
      let _this = this;
      let options;
      let img_url = "";
      if (
        this.category_name === "" 
      ) {
        this.messageAlert("请填写完整信息");
        return;
      }
      if(this.imageUrl.indexOf("blob:") != -1){
          img_url = this.imagePath;
      }
      else{
          let imgeSplit = this.imageUrl.split('/');
          img_url = imgeSplit[imgeSplit.length - 1];
      }
       options = {
          score: this.urlPoints,
          category_name: this.category_name,
          img_url: img_url,
          is_first: this.isFirstRadio,
          status: this.statusRadio,
          sort: this.sort,
        };
      if (this.urlType == "againEdit") {
        // 编辑分类:
        options = Object.assign(options, { category_id: this.urlCategoryId });
      }
      newsMan.saveCategory(options, this.urlType).then(function(res) {
        if (res.code == 1) {
          _this.successfulAlert("操作成功");
          setTimeout(function(){
            _this.$router.push("/newsCategory?points=" + _this.urlPoints);
          },1000);
        }
      });
    },
    //获取分类
    getCategory() {
      let _this = this;
      this.categoryOptions = [];
      let options;
      options = {
        name: "",
        category_id: ""
      };
      newsMan.getCategory(options).then(function(res) {
        let data = res.data;
        if (res.code == 1) {
          for (let i = 0; i < data.length; i++) {
            _this.categoryOptions.push({
              value: data[i].category_id,
              label: data[i].name
            });
          }
        }
      });
    },
    //获取项目
    getProject() {
      let _this = this;
      this.projectOptions = [];
      let options;
      options = {
        spid: "",
        topic: ""
      };
      newsMan.getProject(options).then(function(res) {
        let data = res.data;
        if (res.code == 1) {
          for (let i = 0; i < data.models.length; i++) {
            _this.projectOptions.push({
              value: data.models[i].id,
              label: data.models[i].topic
            });
          }
        }
      });
    },
    //上传图片成功
    uploadImgSuccess(res, file) {
        this.imagePath = res.data.file.path;
        this.imageUrl = URL.createObjectURL(file.raw);
      },
    //返回
    goBack() {
      this.$router.push("/newsCategory?points=" + this.urlPoints);
    },
    //获取地址栏参数
    getUrlParam(paraName) {
      var url = document.location.toString();
      var arrObj = url.split("?");
      if (arrObj.length > 1) {
        var arrPara = arrObj[1].split("&");
        var arr;
        for (var i = 0; i < arrPara.length; i++) {
          arr = arrPara[i].split("=");
          if (arr != null && arr[0] == paraName) {
            return arr[1];
          }
        }
        return "";
      } else {
        return "";
      }
    },
    //错误弹窗
    messageAlert(msg) {
      this.$message.error(msg);
    },
    //成功弹窗
    successfulAlert(msg) {
      this.$message({
        message: msg,
        type: "success"
      });
    }
  }
};
</script>

<style lang="less">
.topEdit {
  height: 80px;
  padding: 20px;
  li {
    float: left;
    margin-right: 30px;
    span {
      float: left;
      line-height: 38px;
      color: #f56c6c;
    }
    .el-input {
      float: left;
      width: 200px;
    }
  }
}
.editItem {
  padding: 20px 20px;
  .group1 {
    .leftTitle {
      float: left;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      color: #2d2d2d;
      min-width: 60px;
      margin-right: 10px;
    }
    .rightContent {
      float: left;
      .tip1 {
        float: left;
        color: #999;
        font-size: 12px;
      }
    }
    .lgRightContent {
      width: 40%;
    }
  }
}
.operationButtom {
  text-align: center;
  height: 100px;
  margin-top: 30px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px!important;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
